import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import '../assets/css/mainContent.scss';
import Slider from '../components/Menu';
import Home from './home';
import StuList from './stuList';
import StuImport from './stuImport';
import ClassManage from './classManage';
import noFound from './noFound';
// var Mock = require('mockjs');


class MainContent extends Component {
    constructor() {
        super();
        this.state = { 
            /*data: Mock.mock({
                "menu|5-10": [{
                    'name': '@cname',   //中文名称
                    'id|+1': 0,   // 自增
                    "children|0-3": [{
                        'name': '@cname',    
                        'id|+1': 100, 
                    }]
                }]
            }),*/
            data: [
                {
                    name: '首页',
                    url: '/main/home',
                    id: 1,
                },
                {
                    name: '学生管理',
                    url: '/main/stuManage',
                    id: 2,
                    children: [
                        {
                            name: '学生列表',
                            url: '/main/stuList',
                            id: 5, 
                        },
                        {
                            name: '学生导入',
                            url: '/main/stuImport',
                            id: 6, 
                        }
                    ]
                },
                {
                    name: '班级管理',
                    url: '/main/classManage',
                    id: 3,
                }
            ]
         };
    }

    componentDidMount() {
        
    }

    componentWillUnMount() {

    }
    
    render() { 
        return (
            <div className="App">
                <section className="App-container">
                    <aside className="menu-list">
                        <Slider data={this.state.data}></Slider>
                    </aside>
                    
                    <main className="App-main">
                        <div className="main-panel">
                            <header>
                                XXX机构
                            </header>
                            <div className="main-content">
                                <Switch>
                                    <Route path="/main/home" component={Home}/>
                                    <Route path="/main/stuList" component={StuList}/>
                                    <Route path="/main/stuImport" component={StuImport}/>
                                    <Route path="/main/classManage" component={ClassManage}/>
                                    <Route component={noFound}/>
                                </Switch>
                            </div>
                        </div>
                    </main>
                </section>
            </div>
        );
    }
}

export default MainContent;
